<template>
  <div class="index list">
    <Header></Header>
    <div class="main" style="padding-top: 60px">
        <p class="current-nav">
            当前位置 :
            <router-link to="homePage">首页</router-link>
            <i>></i>下载专题
            <i>></i>{{$route.query.name}}
        </p>
      <div class="listMain" style="height: 100%">

          <div class="listDiv">
            <h2 class="listTit"><img src="../../../static/images/yq.png" alt=""> {{$route.query.name}}</h2>
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <div class="clearfix">
                <el-form-item label="名称: ">
                  <el-input
                    v-model="formInline.lawName"
                    style="width:465px;"
                    placeholder="请输入名称"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="search"
                    @click="getList1"
                  >
                    <i class="el-icon-search"></i> 搜索
                  </el-button>
                  <el-button
                    class="search"
                    @click="reset"
                  >
                    <i class="el-icon-refresh"></i> 重置
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
            <ul class="half_list clearfix" >
                <li v-for="(item,index) in list" :key="index" class="clearfix" @click="gotoNext(item.id)">
                    <span class="span1">{{item.effectiveTime|timeBy}}</span>
                 <!-- <router-link :to="{path:'newsDetail2',query:{id:item.id,type:1}}" :title="item.title">--><span>{{item.lawName}}</span><!--</router-link>-->
                </li>
            </ul>
            <div class="page-container">
                <el-pagination
                    @current-change="lookList"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
                <el-button>确定</el-button>
            </div>
          </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import config from "../../config.js";
import Header from '../common/header3'
import Footer from '../common/footer'
export default {
  data () {
    return {
        currentPage: 1,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        list: [],
        formInline:{ lawName:''}
    }
  },
  components: {
    Header,
    Footer
  },
  mounted(){
  },
  methods:{
    gotoNext(id) {
      this.$router.push({name: 'newsDetail2', query: {id: id}});
    },
      lookList(){
      this.getList1()
      },
      getList1() {
      this.$axios.post(config.baseUrl + 'emergency/v1.0/index/laws/list', {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        lawName:this.formInline.lawName,
          type: this.$route.query.name=='应急法规'?'1':'1'
          }).then((res) => {
          if (res.data.meta.success) {
            this.list = res.data.data.records
            this.total = Number(res.data.data.total);
          } else {
            this.list=[];
            this.total=0
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }

        }).catch((response) => {
          console.log(response);
        })
    },
    reset(){
        this.formInline.lawName=''
        this.getList1()
    }
  },
  created() {
    this.getList1()
  },
  filters: {
    timeBy(val) {
      if (val) {
        return val.substring(0, 10)
      }
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.list{
    .current-nav {
        float: left;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 30px;
        color: #939393;
        font-size: 14px;
        a{
            color: #939393;
            font-size: 14px;
        }
        i{
            margin: 0 10px;
            font-style: normal;
        }
    }
    .listMain {
        padding: 0 30px;
        background: #fff;
        width: calc(100% - 60px);
        margin: 40px auto 0;
        border-radius: 4px;
        .listDiv{
            width: 80%;
            margin: 0 auto;
            padding: 40px 0;
            .listTit{
                font-size: 18px;
                font-weight: bold;
                height: 20px;
                line-height: 20px;
                position: relative;
                padding-left: 0px;
                margin-bottom: 50px;
                span{
                    position: absolute;
                    height: 20px;
                    width: 6px;
                    background: #00a0e9;
                    display: block;
                    border-radius: 3px;
                    left: 0;
                    top: 0;
                }
            }
            .yjList{
                //padding: 0 10px;
      /*        li{
                  height: 36px;
                  border-bottom: 1px dotted #ccc;
                  line-height: 35px;
                  a{
                      display: block;
                      float: left;
                      max-width: calc(100% - 100px);
                      cursor: pointer;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                  }
                  &:hover a{
                      text-decoration: underline;
                      font-weight: bold;
                  }
                  span{
                      color: #999;
                      font-size: 12px;
                      float: right;
                      margin-right: 10px;
                  }
              }*/
          }
        }
    }
  .half_list {
    li {
      height: 75px;
      border-bottom: 1px dotted #ccc;
      box-shadow: 5px 5px 20px #eee;
      margin-bottom: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      cursor: pointer;
      width: 45%;
      margin-right: 20px;
      float: left;
      .span1 {
        display: inline-block;
        color: #fff;
        font-size: 12px;
        margin-right: 10px;
        width: 100px;
        background: #195efa;
        height: 75px;
        line-height: 75px;
        text-align: center;
      }
      &:hover {
        border: 1px solid #195efa;

      }
    }
  }
    .page-container {
        padding: 28px 0;
        width: 620px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        .el-pagination{
            float: right;
        }
        .el-button {
            float: right;
            background: #edf4fe;
            width: 50px;
            padding: 0;
            height: 28px !important;
            margin: 4px 10px auto;
            color: #7fa4fc;
            border: 0;
        }
    }
}

</style>
